var WastageWorkshopBoard = function () {
  var template = /* html */ `
    <div class="wastage-workshop-board" v-loading.fullscreen.lock="loading">
      <search-btns :pagination="pagination" :has-scroll="hasScrolling"></search-btns>
      <div class="wastage-workshop-board-content" :key="pageId">
        <template v-for="(wastageList,rowIndex) in pageWastageList">
          <div ref="wastageRow" :key="'wastageRow_'+rowIndex" :style="{height:'calc('+(100/rowNum)+'% - 3px)'}">
            <template v-for="(wastage,index) in wastageList">
              <wastage-workshop-item :key="'wastage_'+index" :wastage="wastage" :is-show="getHasShow(rowIndex)" :date-index="showStartDateIndex"></wastage-workshop-item>
            </template>
          </div>
        </template>
      </div>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    watch: {
      'pagination.currentPage': function () {
        var wastageRows = this.$refs['wastageRow'];
        if (wastageRows === undefined || !_.isArray(wastageRows)) {
          return;
        }

        var pagination = this.pagination;
        var index = (pagination.currentPage - 1) * pagination.pageSize;
        var wastageRow = wastageRows[index];
        if (SysUtil.isEmpty(wastageRow)) {
          return;
        }

        var $content = $(this.$el).find('.wastage-workshop-board-content');
        var scrollTop = $content.scrollTop();
        var top = $(wastageRow).position().top;
        scrollTop += top - 5;

        var self = this;
        this.hasScrolling = true;
        $content.animate({
          scrollTop: scrollTop
        }, 1000, function () {
          self.hasScrolling = false;
        });
      }
    },

    data: function () {
      return {
        loading: false,
        wastageList: [],
        pageWastageList: [],
        pageId: SysUtil.getId(),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 2
        },
        rowNum: 2,
        colNum: 3,
        showStartDateIndex: 0,
        hasScrolling: false
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.setWastageList(true).then(function () {
        self.toPageWastageList();
        self.loading = false;
        self.boardRuning();
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setWastageList: function (hasAlert) {
        if (hasAlert === undefined) {
          hasAlert = false;
        }

        var self = this;
        return ajaxRequest("energy/getWorkEnergyConsumptionData", {}, true, hasAlert).then(function (wastageList) {
          var wastages = [];
          for (var i = 0; i < wastageList.length; i++) {
            var wastage = wastageList[i];
            wastage = new WastageWorkshopInfo(wastage);
            wastages.push(wastage);
          }

          self.wastageList = wastages;
          return wastages;
        });
      },

      toPageWastageList: function () {
        var wastageList = this.wastageList;
        var pageWastages = [];
        var colNum = this.colNum;
        var rowNum = this.rowNum;
        var totalRow = wastageList.length / colNum;
        totalRow = _.round(totalRow, 1);
        totalRow = Math.ceil(totalRow / rowNum) * rowNum;
        if (totalRow === 0) {
          totalRow = 1;
        }

        for (var i = 0; i < totalRow; i++) {
          pageWastages.push([]);
        }

        var lastRow = 0;
        for (var i = 0; i < wastageList.length; i++) {
          var wastage = wastageList[i];
          var rowIndex = i / colNum;
          rowIndex = Math.floor(rowIndex);
          pageWastages[rowIndex].push(wastage);
          if (i === wastageList.length - 1) {
            lastRow = rowIndex;
          }
        }

        var lastWastage = pageWastages[lastRow];
        if (lastWastage && lastWastage.length > 0) {
          for (var i = lastWastage.length; i < colNum; i++) {
            lastWastage.push(null);
          }
        }

        this.pagination.totalCount = pageWastages.length;
        this.pageWastageList = pageWastages;
      },

      getHasShow: function (rowIndex) {
        var pagination = this.pagination;
        var pageSize = pagination.pageSize;
        var startIndex = (pagination.currentPage - 1) * pageSize;
        return rowIndex >= startIndex && rowIndex < startIndex + pageSize;
      },

      boardRuning: function () {
        this.clearTimeoutList();
        this.setWastageDataRuning();
        this.resetWastageListRuning();
      },

      setWastageDataRuning: function () {
        var self = this;
        var timeout = setTimeout(function () {
          var showStartDateIndex = self.showStartDateIndex;
          showStartDateIndex++;
          var maxIndex = moment().get('date') - wastageBoardDatePageSize;
          if (maxIndex < 0) {
            maxIndex = 0;
          }
          if (showStartDateIndex > maxIndex) {
            showStartDateIndex = 0;
          }
          self.showStartDateIndex = showStartDateIndex;
          self.timeoutList[0] = null;
          self.setWastageDataRuning();
        }, 5000);
        this.timeoutList[0] = timeout;
      },

      resetWastageListRuning: function () {
        var self = this;
        var timeout = setTimeout(function () {
          self.setWastageList().then(function () {
            self.toPageWastageList();
            self.resetWastageListRuning();
          });
          self.timeoutList[1] = null;
        }, 10 * 60 * 1000);
        this.timeoutList[1] = timeout;
      }
    },

    components: {
      SearchBtns: SearchBtns,
      WastageWorkshopItem: WastageWorkshopItem
    },

    template: template
  };
}();
